<template>
  <div class="app-container">
    <div class="filter-tools">
      <el-form :inline="true" :model="filter" class="filter-form">
        <el-form-item label="巡检产品">
          <el-select
            v-model="filter.product_id"
            placeholder="请选择产品"
            clearable
            @change="getModules(filter.product_id)"
          >
            <el-option v-for="(data,i) in Products" :key="i" :label="data.name" :value="data.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="巡检模块">
          <el-select
            v-model="filter.modules"
            placeholder="请选择模块"
            clearable
          >
            <el-option v-for="(data,i) in Modules" :key="i" :label="data.name" :value="data.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="巡检内容">
          <el-input
            v-model="filter.content"
            placeholder="content"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="时间">
        <el-date-picker
          v-model="filter.start_at"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择开始时间">
        </el-date-picker>
        </el-form-item>
        <el-form-item label="~至~">
          <el-date-picker
            v-model="filter.end_at"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="23:59:59"
            placeholder="选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="巡检结果">
          <el-input
            v-model="filter.res"
            placeholder="结果"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="巡检人">
          <el-input
            v-model="filter.created_adminer"
            placeholder="巡检人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="更新人">
          <el-input
            v-model="filter.updated_adminer"
            placeholder="更新人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="ID">
          <el-input
            v-model="filter.id"
            placeholder="ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList()">
            筛选
          </el-button>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button type="success" icon="el-icon-plus" @click="handleAdd()">
            添加
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table v-loading="dataLoading" :data="dataList" :height="height" border>
        <el-table-column
          prop="id"
          label="ID"
          align="center"
          width="80"
        />
        <el-table-column label="所属产品" align="200">
          <template slot-scope="scope">
            <div class="goto" @click="goProduct(scope.row)"><b>产品：</b>{{scope.row.product_name}}</div>
          </template>
        </el-table-column>
        <el-table-column label="巡检模块" min-width="180">
          <template slot-scope="scope">
            <el-tag
              style="margin-bottom:1px"
              v-for="item in scope.row.modules"
              :key="item"
              :type="item"
              effect="dark">
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="巡检内容"
          align="center"
        />
        <el-table-column
          prop="remark"
          label="巡检说明"
          align="center"
        />
        <el-table-column
          prop="note"
          label="巡检备注"
          align="center"
        />
        <el-table-column label="巡检结果" width="200">
          <template slot-scope="scope">
            <div @click="articleNote(scope.row.res)" type="primary" style="margin-left: 16px;" v-html="scope.row.res ? scope.row.res.substring(0,20) + '.....':''"></div>
          </template>
        </el-table-column>

        <el-table-column label="图片记录" width="135">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.info_imgs_urls[0]"
              :preview-src-list="scope.row.info_imgs_urls">
            </el-image>
            <div>共{{scope.row.info_imgs_urls.length}}张图片</div>
          </template>
        </el-table-column>
        <el-table-column label="时间/人" width="220">
          <template slot-scope="scope">
            <div><b>巡检时间:</b>{{scope.row.created_at}}</div>
            <div><b>巡检人:</b>{{scope.row.created_adminer}}</div>
            <div><b>更新时间:</b>{{scope.row.updated_at}}</div>
            <div><b>更新人:</b>{{scope.row.updated_adminer}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                icon="el-icon-edit"
                type="primary"
                size="mini"
                @click="handleEdit(scope.row)"
              >
                更新
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="filter.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="filter.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filter.total"
        @size-change="handleSizeChange"
        @current-change="getList"
      ></el-pagination>
    </div>

    <el-drawer
      :visible.sync="res_note"
      :with-header="false">
      <div style="padding: 35px" v-html="res"></div>
    </el-drawer>

    <el-dialog title="编辑" :visible.sync="dialogStatus" width="900px">
      <el-form :model="formData" label-width="80px">
        <el-form-item label="巡检产品">
          <el-select
            v-model="formData.product_id"
            width="500px"
            placeholder="请选择产品"
            clearable
            @change="getModules(formData.product_id)"
          >
            <el-option v-for="(data,i) in Products" :key="i" :label="data.name" :value="data.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="巡检模块">
          <el-select
            v-model="formData.modules"
            multiple
            placeholder="请选择模块">
            <el-option
              v-for="item in Modules"
              :key="item.id"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="巡检内容">
          <el-input type="textarea" :rows="4" v-model="formData.content" placeholder="content" class="filter-item"/>
        </el-form-item>
        <el-form-item label="巡检说明">
          <el-input type="textarea" :rows="4" v-model="formData.remark" placeholder="remark" class="filter-item"/>
        </el-form-item>
        <el-form-item label="巡检备注">
          <el-input type="textarea" :rows="4" v-model="formData.note" placeholder="note" class="filter-item"/>
        </el-form-item>
        <el-form-item label="巡检结果">
          <el-input type="textarea" :rows="4" v-model="formData.res" placeholder="res" class="filter-item"/>
        </el-form-item>
        <el-form-item label="图片说明">
          <el-upload
            :action="uploadUrl"
            list-type="picture-card"
            :file-list="formData.info_imgs_urls"
            :on-remove="imageRemove"
            :before-upload="beforeAvatarUpload"
            :on-success="imageSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStatus = false">取消</el-button>
        <el-button type="primary" @click="saveForm()">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import * as api from '@/api/randomCheck/logsApi' // API接口
import {moduleAll} from '@/api/randomCheck/moduleApi' // API接口

import {enableCate} from '@/api/project/product' // API接口
import {uploadUrl} from '@/config/index'

export default {
  name: 'randomCheckLog',
  data() {
    return {
      uploadUrl:uploadUrl,
      height:this.$baseTableHeight(1),
      filter: {
        id:"",
        page: 1,
        content:"",
        product_id:"",
        pageSize: 10,
        total: 0,
        start_at:"",
        modules:"",
        created_adminer:"",
        updated_adminer:"",
        res: '',
        end_at:"",
      },
      dataLoading: true,
      dataList: [],
      dialogStatus:false,
      formData:{},
      Products:{},
      Modules:{},
      topStatus:0,
      inputVisible: false,
      inputValue: '',
      res_note:false,
      res:""
    }
  },
  created() {
    this.filter.product_id = this.$route.query.product_id || null
    this.getProduct()
    this.getModules()
    this.getList()
  },
  methods: {
    getList(page = 1) {
      this.filter.page = Number(page)
      api.list(this.filter).then((res) => {
        this.dataList = res.data.list
        this.filter.total = res.data.total
        this.dataLoading = false
      })
    },
    getProduct() {
      enableCate().then((res) => {
        this.Products = res.data.list
        this.dataLoading = false
      })
    },
    articleNote(data) {
      this.res = data
      this.res_note = true
    },
    getModules(product_id = '', adminer = '') {
      moduleAll({
        product_id:product_id,
        adminer:adminer
      }).then((res) => {
        this.Modules = res.data.list
        this.dataLoading = false
      })
    },
    handleSizeChange(val) {
      this.filter.pageSize = val
      this.getList(1)
    },
    goProduct(data) {
      this.$router.push({path:'/project/productList',query:{product_id:data.product_id}});
    },
    handleAdd(){
      this.formData = {
        product_id:"",
        content:"",
        remark:'',
        note:'',
        modules:[],
        res:'',
        info_imgs:[],
        info_imgs_urls:[],
      }
      this.dialogStatus = true
    },
    handleEdit(data){
      this.formData = {
        product_id:data.product_id,
        id:data.id,
        content:data.content,
        note:data.note,
        res:data.res,
        modules:data.modules,
        remark:data.remark,
        info_imgs:data.info_imgs,
        info_imgs_urls:[],
      }
      for(let i in data.info_imgs_urls){
        this.formData.info_imgs_urls.push({'name':data.info_imgs_urls[i],'url':data.info_imgs_urls[i]})
      }
        this.dialogStatus = true
    },
    saveForm(){
      api.save(this.formData).then((res) => {
        this.getList();
        this.$message.success(res.userMsg)
        this.dialogStatus = false
      })
    },

    beforeAvatarUpload(file) {
      // const sizeCheck = file.size / 1024 < 2048;
      // if (!sizeCheck) {
      //   this.$message.error('上传图片大小不能超过 2M!');
      // }
      // return sizeCheck;
      return true
    },
    imageRemove(file, fileList){
      for(let i in this.formData.info_imgs_urls){
        if(file.name == this.formData.info_imgs_urls[i].name){
          this.formData.info_imgs_urls.splice(i,1)
          this.formData.info_imgs.splice(i,1)
          break
        }
      }
    },
    imageSuccess(response, file, fileList){
      if(response.code == 200){
        this.formData.info_imgs.push(response.data.path)
        this.formData.info_imgs_urls.push({'name':response.data.path_img,'url':response.data.path_img})
      }else{
        this.$message.error(response.userMsg)
      }
    },
  },

}
</script>

<style>
.avatar-uploader .el-upload{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.goto:hover{color: #0051ff;}
.goto{
  cursor:pointer
}
</style>


